<template>
  <div id="address">
    <div class="position" @click="$router.push('/addresstwo')">
        <van-cell class="cell" is-link close-icon="close">
        <span>
          <van-icon name="location" />{{$store.state.location.formattedAddress}}
        </span>
      </van-cell>
    </div>
    <van-popup
      position="right"
      :style="{ height: '100%',width: '100%' }"
      close-icon-position="top-left"
    >
      <p>
        <router-link to="/login">
          <van-icon name="arrow-left" />
        </router-link>
        <span>选择收货地址</span>
        <router-link to="/">
          <a>新增地址</a>
        </router-link>
      </p>
      <van-search label="北京" placeholder="请输入地址"></van-search>
      <h2>当前地址</h2>
      <h5>
        北京市昌平区沙河镇沙河路
        <span>
          <van-icon name="aim" />重新定位
        </span>
      </h5>
      <h2>收货地址</h2>
    </van-popup>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$store.dispatch('getFormattedAddress')
    AMap.plugin("AMap.Geolocation", function () {
      var geolocation = new AMap.Geolocation({
        // 是否使用高精度定位，默认：true
        enableHighAccuracy: true,
        // 设置定位超时时间，默认：无穷大
        timeout: 10000,
  
      });

      geolocation.getCurrentPosition();
      AMap.event.addListener(geolocation, "complete", onComplete);
      AMap.event.addListener(geolocation, "error", onError);

      function onComplete(data) {
        // data是具体的定位信息
        // console.log(data)
      }

      function onError(data) {
        // 定位出错
      }
    });
  },
};
</script>

<style lang="less" scoped>
#address {
  .cell {
    width: 100%;
    height: 45px;
    background-image: linear-gradient(90deg, #0af, #0085ff);
    font-size: 18px;
    font-weight: bold;
    span {
      color: #fff;
    }
  }
  .van-popup {
    p {
      height: 44px;
      line-height: 44px;
      background-image: linear-gradient(90deg, #0af, #0085ff);
      color: #fff;
      text-align: center;
      font-size: 18px;
      padding-right: 10px;
      display: flex;
      justify-content: space-between;
      .van-icon {
        margin-top: 10px;
        font-size: 25px;
        margin-left: 5px;
      }
      span {
        margin-left: 60px;
      }
      a {
        color: #fff;
        font-size: 16px;
        float: right;
      }
    }
    h2 {
      height: 42px;
      line-height: 42px;
      font-weight: normal;
      text-indent: 20px;
      background-color: #eee;
      color: #666;
      font-size: 14px;
    }
    h5 {
      height: 42px;
      line-height: 42px;
      text-indent: 20px;
      color: #333;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      span {
        font-size: 14px;
        color: #2395ff;
        font-weight: normal;
        margin-right: 10px;
      }
    }
  }
}
</style>